<template>
	<view class="region">
		<!-- <u-tabs 
			:list="tabs" 
			:current="currentTab" 
			:activeStyle="{fontWeight: 'bold'}" 
			:scrollable="scrollableTabs" 
			lineColor="#13a0e7" 
			@click="onTabClick"
		></u-tabs> -->
		<tabs 
			:tabs="tabs" 
			:tabIndex="currentTab" 
			:fill="tabFill" 
			@change="onTabClick"
		></tabs>
		<view class="region-body">
			<template v-if="tabValue == AreaTypeEnum.province">
				<view 
					v-for="(item,index) in provinceList" 
					:key="item.value" 
					class="region-label" 
					:class="{'region-active': item.value == provinceItem.value}" 
					@click="onProvinceClick(item)"
				>{{ item.text }}</view>
			</template>
			
			<template v-if="tabValue == AreaTypeEnum.city">
				<view 
					v-for="(item,index) in cityList" 
					:key="item.value" 
					class="region-label" 
					:class="{'region-active': item.value == cityItem.value}" 
					@click="onCityClick(item)"
				>{{ item.text }}</view>
			</template>
			
			<template v-if="tabValue == AreaTypeEnum.county">
				<view 
					v-for="(item,index) in districtList" 
					:key="item.value" 
					class="region-label" 
					:class="{'region-active': item.value == districtItem.value}" 
					@click="onDistrictClick(item)"
				>{{ item.text }}</view>
			</template>
			
			<template v-if="tabValue == AreaTypeEnum.township">
				<view 
					v-for="(item,index) in townshipList" 
					:key="item.value" 
					class="region-label" 
					:class="{'region-active': item.value == townshipItem.value}" 
					@click="onTownshipClick(item)"
				>{{ item.text }}</view>
			</template>
			
			<template v-if="tabValue == AreaTypeEnum.village">
				<view 
					v-for="(item,index) in villageList" 
					:key="item.value" 
					class="region-label" 
					:class="{'region-active': item.value == villageItem.value}" 
					@click="onVillageClick(item)"
				>{{ item.text }}</view>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * 省市区选择
	 */
	import { getChildAreaList } from "@/api/common.js"
	import { AreaType as AreaTypeEnum } from '@/utils/enum.js'
	import areaConfigMixins from '@/mixins/area-config.js'
	
	const defaultTabs = [
		{ name: '省/自治区', value: AreaTypeEnum.province },
		{ name: '盟/市', value: AreaTypeEnum.city },
		{ name: '旗/县/区', value: AreaTypeEnum.county },
		{ name: '苏木/镇/街道', value: AreaTypeEnum.township },
		{ name: '嘎查/村/社区', value: AreaTypeEnum.village },
	]
	
	export default {
		mixins: [areaConfigMixins],
		props: {
			fiveLevel: Boolean, // 是否五级联动
			addAll: Boolean, // 是否每一项添加【全部】
		},
		data() {
			return {
				AreaTypeEnum, 
				
				tabs: [],
				currentTab: 0,
				
				provinceList: [],
				cityList: [],
				districtList: [],
				townshipList: [],
				villageList: [],
				
				provinceItem: {},
				cityItem: {},
				districtItem: {},
				townshipItem: {},
				villageItem: {},
			}
		},
		computed: {
			lastAreaType() {
				return this.tabs[this.tabs.length - 1].value
			},
			tabFill() {
				if (this.fiveLevel) {
					return this.tabs.length <= 3
				}
				return true
			},
			tabValue() {
				return this.tabs[this.currentTab].value
			}
		},
		watch: {
			fiveLevel() {
				this.generateTabs()
			}
		},
		created() {
			this.generateTabs()
		},
		methods: {
			// 生成地区联动等级
			async generateTabs() {
				// 显示固定前三个地区级别
				if (!this.fiveLevel) {
					this.tabs = defaultTabs.slice(0, 3)
					this.provinceList = await this.getRegionList()
					return
				}
				// 获取地区配置 动态化生成地区联动级别
				if (!this.areaConfig) {
					await this.getAreaConfig()
				}
				// areaType 地区类型：1.省；2.市；3.区；4.乡镇；5村
				// areaDeep 可选地区子级层级数
				const { areaType, areaDeep, areaCode, areaName } = this.areaConfig
				// 生成地区 tabs
				this.tabs = defaultTabs.filter(item => item.value > areaType).slice(0, areaDeep)
				// 渲染顶级地区数据
				const areaList = await this.getRegionList(areaCode)
				const currentArea = { text: areaName, value: areaCode }
				switch (Number(areaType)){
					case AreaTypeEnum.province: // 省项目获取市
						this.cityList = areaList
						this.provinceItem = currentArea
						break;
					case AreaTypeEnum.city: // 市项目获取区
						this.districtList = areaList
						this.cityItem = currentArea
						break;
					case AreaTypeEnum.county: // 区项目获取镇
						this.townshipList = areaList
						this.districtItem = currentArea
						break;
					case AreaTypeEnum.township: // 镇项目获取村
						this.villageList = areaList
						this.townshipItem = currentArea
				}
			},
			// tab切换
			onTabClick(index) {
				this.currentTab = index
			},
			// 基于父ID获取地区
			async getRegionList(pid = 0) {
				try {
					uni.showLoading({ title: '加载中...' })
					const { data } = await getChildAreaList({ pid })
					this.addAll && data.unshift({
						text: '全部',
						value: ''
					})
					return data.filter(item => item.type != 0)
				} finally {
					uni.hideLoading()
				}
			},
			// 点击省
			async onProvinceClick(item) {
				if (this.provinceItem.value != item.value) {
					// 获取市
					this.cityList = await this.getRegionList(item.value)
					// 清空
					this.districtList = []
					this.districtItem = {}
					this.townshipList = []
					this.townshipItem = {}
					this.villageList = []
					this.villageItem = {}
				}
				this.provinceItem = item
				this.currentTab++
			},
			// 点击市
			async onCityClick(item) {
				this.cityItem = item
				// 结束选择
				if (this.lastAreaType == AreaTypeEnum.city || !item.value) {
					return this.onEmit()
				}
				// 获取区
				this.districtList = await this.getRegionList(item.value)
				this.currentTab++
			},
			// 点击区
			async onDistrictClick(item) {
				if (!this.fiveLevel) {
					this.districtItem = item
					this.onEmit()
				} else {
					this.districtItem = item
					// 结束选择
					if (this.lastAreaType == AreaTypeEnum.county || !item.value) {
						return this.onEmit()
					}
					// 获取乡镇
					this.townshipList = await this.getRegionList(item.value)
					this.currentTab++
				}
			},
			// 点击乡镇
			async onTownshipClick(item) {
				this.townshipItem = item
				// 结束选择
				if (this.lastAreaType == AreaTypeEnum.township || !item.value) {
					return this.onEmit()
				}
				// 获取村
				this.villageList = await this.getRegionList(item.value)
				this.currentTab++
			},
			// 点击村
			async onVillageClick(item) {
				this.villageItem = item
				this.onEmit()
			},
			onEmit() {
				this.$emit('change', {
					province: this.provinceItem,
					city: this.cityItem,
					district: this.districtItem,
					township: this.townshipItem,
					village: this.villageItem,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.region {
	height: 50vh;
	display: flex;
	flex-direction: column;
	&-body {
		flex: 1;
		overflow-y: auto;
		text-align: center;
		padding-bottom: 20rpx;
		.region-label {
			font-size: 28rpx;
			line-height: 1.5;
			padding: 10rpx;
			color: $u-tips-color;
		}
		.region-active {
			color: $u-primary;
		}
	}
}
</style>
